<!-- 合并表格 -->
<template>
  <div class="mergeTable">
    <table id="mergeTable" width="100%" height="100%" align="left" cellpadding="0" cellspacing="0">
      <tr v-if="props.columns.length > 0">
        <th
          v-for="(item, index) in props.columns"
          :key="index"
          :width="item.width"
          :align="item.align"
          :colspan="index === props.columns.length - 1 ? '2' : ''"
        >
          {{ item.title }}
        </th>
      </tr>
      <tr v-for="(item, index) in props.tableList" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ item.satelliteName }}</td>
        <td>{{ item.fxtName }}</td>
        <td>{{ item.qbjName1 }}</td>
        <td>{{ item.qbjName2 }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { defineProps, defineExpose } from 'vue'
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  tableList: {
    type: Array,
    default: () => []
  }
})
// 合并表格
const funUniteTable = (colLength) => {
  // 表格列数
  const tb = document.getElementById('mergeTable')
  tb.style.display = ''
  const rowCount = tb.rows.length // 行数
  let colCount = tb.rows[0].cells.length // 列数
  let i = 0
  let j = 0
  let obj = null
  let newObj = null
  // 为每个单元格命名
  for (i = 0; i < rowCount; i++) {
    for (j = 0; j < colCount; j++) {
      tb.rows[i].cells[j].id = 'tb_' + i.toString() + '_' + j.toString()
    }
  }
  // 合并行
  for (i = 0; i < colCount; i++) {
    if (i == colLength) break
    obj = document.getElementById('tb_0_' + i.toString())
    for (j = 1; j < rowCount; j++) {
      newObj = document.getElementById('tb_' + j.toString() + '_' + i.toString())
      if (
        obj.innerText == newObj.innerText &&
        (newObj.innerText != '' || obj.innerText != '') &&
        (obj.innerText != '-' || obj.innerText != '-')
      ) {
        obj.rowSpan++
        newObj.parentNode.removeChild(newObj)
      } else {
        obj = document.getElementById('tb_' + j.toString() + '_' + i.toString())
      }
    }
  }
  // 合并列
  for (i = 0; i < rowCount; i++) {
    colCount = tb.rows[i].cells.length
    obj = document.getElementById(tb.rows[i].cells[0].id)
    for (j = 1; j < colCount; j++) {
      if (j >= colLength) break
      if (obj.colSpan >= colLength) break
      newObj = document.getElementById(tb.rows[i].cells[j].id)
      if (
        obj.innerText == newObj.innerText &&
        (newObj.innerText != '' || obj.innerText != '') &&
        (obj.innerText != '-' || newObj.innerText != '-')
      ) {
        obj.colSpan++
        newObj.parentNode.removeChild(newObj)
        j = j - 1
      } else {
        obj = newObj
        j = j + obj.rowSpan
      }
    }
  }
}
defineExpose({
  funUniteTable
})
</script>
<style lang="less" scoped>
.mergeTable {
  width: 100%;
  height: auto;
  // overflow-y:auto;
  // scrollbar-width: none; /* Firefox */
  // -ms-overflow-style: none; /* IE 10+ */
  // &::-webkit-scrollbar{
  //     display: none;
  // }
  table {
    width: 100%;
    color: #ffffff;
    border: solid 1px #ffffff;
    th {
      height: 30px;
      border-right: solid 1px #ffffff;
      background-color: #2d5889;
      &:last-child {
        border-right: 0;
      }
    }
    td {
      height: 30px;
      border-right: solid 1px #ffffff;
      border-top: solid 1px #ffffff;
      &:last-child {
        border-right: 0;
      }
    }
  }
}
</style>
